<template>
  <LoginBack>
      <div class="login_box">
          <!--显示 log 图-->
          <div class="logo_box">
              <img src="../assets/images/log.png" alt="加载失败">
          </div>
          <!--登录输入 表单-->
          <div class="login_form">

              <el-form :model="loginForm" :rules="loginRules" ref="loginRef">
                  <el-form-item label="" prop="username">
                      <el-input :prefix-icon="User"  placeholder="请输入账号"
                                v-model="loginForm.username" class="u_input"/>
                  </el-form-item>
                  <el-form-item label="" prop="password">
                      <el-input :prefix-icon="Lock" placeholder="请输入密码" type="password"
                                v-model="loginForm.password" class="p_input"/>
                  </el-form-item>
                  <el-form-item label="记住用户">
                      <el-switch v-model="loginForm.status"
                                 style="--el-switch-on-color: #006a9b"/>
                  </el-form-item>
                  <el-form-item>
                      <el-button  color="#006a9b" type="primary" @click="clicklogin" class="btn">登录</el-button>
                  </el-form-item>
              </el-form>

          </div>
          <!--没有账号去注册-->
          <div class="to_register">
              没有账号？<span style="color: #006a9b" @click="toRegister">点击注册</span>
          </div>
      </div>
  </LoginBack>
</template>

<script lang="ts">
import LoginBack from "@/components/LoginBack.vue";
import {Lock, User} from "@element-plus/icons-vue";
import { ElMessage } from 'element-plus'
export default {
    name: "Login",
    computed: {
        Lock() {
            return Lock
        },
        User() {
            return User
        }
    },
    components: {
        LoginBack
    },
    data(){
        return{
            loginForm:{
                username: '',
                password: '',
                status: false,
            },

            // TODO 定义 登录表单的 校验 规则
            loginRules:{
                username: [
                    { required: true, message: '用户名为必填项', trigger: 'blur' },
                ],
                password: [
                    { required: true, message: '密码为必填项', trigger: 'blur'},
                    {min: 3, max: 6, message: '密码长度是在3到6位之间'}
                ]
            }
        }
    },
    methods:{
        // 点击登录 执行 方法
        async clicklogin(){

            // TODO 进行表单校验 获取表单 对象
            // @ts-ignore
            const loginRef = this.$refs['loginRef']
            loginRef.validate((res: boolean) => {
                if (res){
                    console.log('表单校验通过')
                    // 调用登录的方法
                    this.login()
                }
            })
        },
        async login(){
            // 发送请求到 后端
            // alert('点击登录按钮')
            // @ts-ignore
            const res = await this.$api.login(this.loginForm)

            if(res.status == 200) {
                // @ts-ignore
                if (this.loginForm.status){
                    // 保存用户的 账号密码(保存到浏览器的 localStorage)
                    // @ts-ignore
                    const uInfo = JSON.stringify(this.loginForm)
                    // 将 账号-密码-状态 保存到 localStorage
                    window.localStorage.setItem('uInfo',uInfo)
                    // @ts-ignore
                    console.log(this.loginForm)

                    // TODO 提取token
                    console.log('登录返回的响应:',res.data.token)
                    const token = res.data.token
                    window.sessionStorage.setItem('token',token)
                    // @ts-ignore
                    window.sessionStorage.setItem('uname',this.loginForm.username)


                    // @ts-ignore
                    this.$message.success('登录成功')
                    // @ts-ignore
                    this.$router.push('/allProject')

                } else {
                    // 如果没有勾选 保存信息 那么就会删除 localStorage 中的 uInfo
                    window.localStorage.removeItem('uInfo')
                    // @ts-ignore
                    this.$router.push('/allProject')
                }

            }if (res.status != 200){
                ElMessage({
                    showClose: true,
                    message: '登录失败',
                    type: 'error',
                    duration: 1000
                })
            }
        },
        toRegister(){
            // @ts-ignore
            this.$message.warning('暂未开放注册')
        }
    },

    // 组件创建之后 执行 钩子 函数
    created() {
        // 判断 localStorage 中 是否 记住了 用户信息, 如果有 记住则 填充到页面上 显示
        const uInfo = window.localStorage.getItem('uInfo')
        if (uInfo){
            // @ts-ignore
            this.loginForm = JSON.parse(uInfo)

        }
    }
}
</script>

<style scoped>

/*登录框的样式*/
.login_box {
    color: #fff;
    width: 500px;
    /*height: 100%;*/
    /*border: solid 1px #fff;*/
    /*margin: 150px auto;*/
    padding-top: 150px;
    margin: 0 auto;
    /*overflow: hidden;*/
}

/*logo居中*/
.logo_box{
    text-align: center;
}

/*按钮的样式*/
.btn{
    width: 100%;

}

.u_input{

}

</style>